<template>
	<view class="delivery" :data-theme="theme">
		<view style="background-color: #fff;font-weight: bolder;padding: 20rpx;">
			<view class="header-top" style="padding: 20rpx;">
				{{skuName}}
			</view>
			<view class="header-content" style="padding: 20rpx;">
				<view class="header_left">
					<span style="color: #ccc;">交接方式</span><span style="margin: 0 10rpx;">抽点交接</span>
				</view>
				<view class="header_left" style="margin-left: 20rpx;">
					<span style="color: #ccc;">已收货</span><span style="margin: 0 10rpx;">{{totalOperateQty?totalOperateQty:'0'}}</span>
				</view>
			</view>
		</view>

		<view v-if="deliveryList.length > 0" class="content"
			style="margin: 20rpx;background-color: #fff;padding: 20rpx;border-radius: 10rpx;">
			<view
				style="display: flex;justify-content: space-between;font-weight: bold;font-size: 15px;margin-bottom: 30rpx;">
				<view>
					交货明细
				</view>
			</view>
			<view v-for="(item,index) in deliveryList" :key="index">
				<view style="font-size: 28rpx;padding: 20rpx 0;display: flex;">
					<view style="flex: 1;">
						<span class="demo-uni-col dark">{{item.receivingRecordNumber}}</span>
					</view>
					<view style="align-items: flex-end;flex: 1;text-align: end;">
						<span class="demo-uni-col dark">已收货 {{item.operateQty}}</span>
					</view>
				</view>
				<view
					style="font-size: 26rpx;color: #999;padding: 20rpx 0;display: flex;">
					<view style="flex: 3;">
						<view class="demo-uni-col dark">{{item.operateTime}}</view>
					</view>
					<view style="flex: 2;">
						<view class="demo-uni-col dark">{{receiveTypeList[item.receiveType]}}</view>
					</view>
					<view style="align-items: flex-end;flex: 2;text-align: end;">
						<view class="demo-uni-col dark"><text style="margin: 0 10rpx;">收货数量</text> +{{item.operateQty}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="content" style="margin: 20rpx;background-color: #fff;padding: 20rpx;border-radius: 10rpx;">
			<view
				style="display: flex;justify-content: space-between;font-weight: bold;font-size: 15px;margin-bottom: 30rpx;">
				<view>
					质检明细
				</view>
				<view>
					质检不合格 0
				</view>
			</view>
			<!-- <uni-row class="demo-uni-row" style="font-size: 30rpx;background-color: #fdfafd;padding: 20rpx 0;">
				<uni-col :span="9">
					<view class="demo-uni-col dark">操作时间</view>
				</uni-col>
				<uni-col :span="6">
					<view class="demo-uni-col dark">质检类型</view>
				</uni-col>
				<uni-col :span="6">
					<view class="demo-uni-col dark">不合格数量</view>
				</uni-col>
				<uni-col :span="3" style="align-items: flex-end;">
					<view class="demo-uni-col dark">质检详情</view>
				</uni-col>
			</uni-row> -->
			<view style="font-size: 30rpx;background-color: #fdfafd;padding: 20rpx 0;display: flex;">
				<view style="flex: 4;">
					<view class="demo-uni-col dark">操作时间</view>
				</view>
				<view style="flex: 4;">
					<view class="demo-uni-col dark">质检类型</view>
				</view>
				<view style="flex: 4;">
					<view class="demo-uni-col dark">不合格数量</view>
				</view>
				<view style="align-items: flex-end;flex: 5;text-align: end;">
					<view class="demo-uni-col dark">质检详情</view>
				</view>
			</view>
			<uni-row class="demo-uni-row"
				style="font-size: 26rpx;color: #999;background-color: #fdfafd;padding: 20rpx 0;text-align: cent">
				<uni-col :span="9">
					<view class="demo-uni-col dark">2024-04-22</view>
				</uni-col>
				<uni-col :span="6">
					<view class="demo-uni-col dark">质检类型</view>
				</uni-col>
				<uni-col :span="6">
					<view class="demo-uni-col dark">12</view>
				</uni-col>
				<uni-col :span="3" style="align-items: flex-end;">
					<view class="demo-uni-col dark">质检详情</view>
				</uni-col>
			</uni-row>
		</view>
	</view>
</template>

<script>
	import {
		getReceivingListApi
	} from '@/api/delivery.js';
	import {
		setThemeColor
	} from '@/utils/setTheme.js'
	let app = getApp();
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				tableform: {},
				dataList: [],
				skuName: '',
				totalOperateQty: '', //已交货总数
				receiveTypeList: ['其他', '仓服绑容器揽收'],
				deliveryList: [], //交货明细列表
				inactiveArray: [], //质检明细列表
			};
		},
		onLoad(options) {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			console.log('options',options)
			this.skuName = options.skuName;
			this.tableform = {
				deliveryTaskNumber: options.deliveryTaskNumber,
				skuId: options.skuId
			};
			this.getReceivingList(this.tableform);
		},
		methods: {
			getReceivingList(tableform) {
				getReceivingListApi(tableform).then((res) => {
					this.dataList = res.data;
					const activeArray = res.data.filter(obj => obj.receivingStatus === 1);
					const inactiveArray = res.data.filter(obj => obj.receivingStatus === 2);

					this.deliveryList = activeArray; //交货明细
					this.inactiveArray = inactiveArray; //质检明细

					let totalOperateQty = '';
					for (let i = 0; i < this.deliveryList.length; i++) {
						totalOperateQty += this.deliveryList[i].operateQty
					};
					this.totalOperateQty = totalOperateQty;

					console.log(inactiveArray, totalOperateQty);
				})
			}
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
	}

	::v-deep .u-popup {
		flex: 0 !important;
	}

	.page {
		flex: 1;
	}

	/* #endif */
	.delivery {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		// background-color: #ffffff;
		/* #ifdef MP-ALIPAY || MP-BAIDU */
		height: 100vh;
		/* #endif */
	}

	.header-content {
		display: flex;
	}
</style>